<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="../include/tag.jsp" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <title>表格分析</title>
    <link rel="stylesheet" href="${ctx}/css/common/list.css">
    <link rel="stylesheet" href="${ctx}/css/common/table.css">
    <%@include file="../include/commonFile.jsp" %>
</head>
<body>
<!--头部-->
<%@include file="../include/header.jsp" %>
<div class="index-outside">
    <%@include file="../include/sidebar.jsp" %>
    <!--内容-->
    <section>
        <div class="section-main">
            <div class="f-search-bar">
                <div class="search-container">
                    <ul class="search-form-content">
                        <li class="form-item-inline">
                            <label class="search-form-lable">第</label>
                            <div class="layui-input-inline">
                                <input type="text" name="blockNum" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="float: initial;display: inline-block;">段表格（每段代表5列）</div>
                        </li>
                    </ul>
                    <ul class="search-form-content">
                        <li class="form-item-inline">
                            <label class="search-form-lable">第</label>
                            <div class="layui-input-inline">
                                <input type="text" name="rowNums" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="float: initial;display: inline-block;">行号&emsp;（请用“逗号”隔开）</div>
                        </li>
                    </ul>
                    <ul class="search-form-content">
                        <li class="form-item-inline">
                            <label class="search-form-lable">第</label>
                            <div class="layui-input-inline">
                                <input type="text" name="colNums" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="float: initial;display: inline-block;">列号&emsp;（请用“逗号”隔开）</div>
                        </li>
                        <li class="form-item-inline" style="position: absolute; left: 450px">
                            <div class="sub-btns">
                                <a class="layui-btn layui-btn-danger" href="javascript:void(0);" id="btnImportExcel">上传Excel</a>
                                <form id="userForm" method="post" class="dn" action="${ctx}/excel/excel/importExcel.do" enctype="multipart/form-data">
                                    <input type="file" name="uploadFile" id="upload_input" single accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
                                </form>
                            </div>
                        </li>
                    </ul>
                    <ul class="search-form-content">
                        <li class="form-item-inline">
                            <label class="search-form-lable">&emsp;</label>
                            <div class="layui-input-inline">
                                <input type="text" name="fields" autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux" style="float: initial;display: inline-block;">字段值（请用“逗号”隔开）</div>
                        </li>
                        <li class="form-item-inline" style="position: absolute; left: 450px">
                            <div class="sub-btns">
                                <a class="layui-btn layui-btn-danger" href="javascript:void(0);" id="btnCalculate">计&emsp;&emsp;&nbsp;算</a>
                                <a class="layui-btn layui-btn-danger" href="javascript:void(0);" id="btnReset">重&emsp;&emsp;&nbsp;置</a>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="list-content">
                <div class="cl">
                    <table class="layui-table">
                        <colgroup>
                            <col>
                            <col>
                            <col>
                        </colgroup>
                        <thead>
                        <tr>
                            <th class="block-tr">表格段</th>
                            <th>数量</th>
                            <th>成功数量</th>
                        </tr>
                        </thead>
                        <tbody>

                        </tbody>
                    </table>
                </div>
            </div>
        </div><!--底部-->
        <%@include file="../include/footer.jsp" %>
    </section>
</div>
<script type="text/html" id="tr_template">
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</script>
<script type="text/javascript" src="${ctx}/script/common/list.js"></script>
<script type="text/javascript" src="${ctx}/script/common/table_option.js"></script>
<script type="text/javascript">
    txz.initHeader({
        nav: [{
            name: '表格分析',
            curr: true
        }],
        info: '',
        btns: []
    });

    $(function () {
        /**
         * 上传
         */
        $('#btnImportExcel').on('click', function () {
            $('#upload_input').off('change').on('change', function (e) {
                console.log(e.target.files[0].name);
                //loading层
                myLoadIndex = layer.msg('努力上传中,请耐心等待...', {
                    icon: 16,
                    shade: 0.1,
                    time: 0
                });
                var formData = new FormData();
                formData.append("uploadFile",$("#upload_input")[0].files[0]);
                formData.append("projectId", '${project.id}');

                $.ajax({
                    url: $("#userForm").attr('action'),
                    type: 'post',
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    beforeSend: function () {
                        console.log("正在进行，请稍候");
                    },
                    success: function (res) {
                        console.info('执行完了');
                        $("#userForm")[0].reset();
                        util.layerMsgSuccess("上传成功");
                    },
                    error: function (res) {
                        // layer.close(myLoadIndex);
                        $("#userForm")[0].reset();
                        util.layerMsgError("上传异常：" + JSON.stringify(res));
                    }
                });
                return false;
            });
            $('#upload_input').click();
            return false;
        });

        /**
         * 计算
         */
        $("#btnCalculate").click(function () {
            var blockNum = $("[name=blockNum]").val().trim(); // 块
            var rowNums = $("[name=rowNums]").val().trim(); // 行
            var colNums = $("[name=colNums]").val().trim(); // 列
            var fields = $("[name=fields]").val().trim(); // 字段

            if (!util.isValid(blockNum)) {
                util.layerMsgError("请输入表格段数")
                return false;
            } else if (!util.checkNumber(blockNum)) {
                util.layerMsgError("请输入正确的表格段数")
                return false;
            }

            if (util.isValid(rowNums)) {
                var flag = true;
                rowNums.split(",").forEach(function (value, index) {
                    if (!util.isValid(value) || !util.checkNumber(value)) {
                        util.layerMsgError("请输入正确的行数")
                        flag = false;
                        return false;
                    }
                })
                if (!flag) {
                    return flag;
                }
            }
            if (util.isValid(colNums)) {
                var flag = true;
                colNums.split(",").forEach(function (value, index) {
                    if (!util.isValid(value)) {
                        util.layerMsgError("请输入正确的要查找的列")
                        flag = false;
                        return false;
                    }
                })
                if (!flag) {
                    return flag;
                }
            }

            if (util.isValid(fields)) {
                var flag = true;
                fields.split(",").forEach(function (value, index) {
                    if (!util.isValid(value)) {
                        util.layerMsgError("请输入正确的要查找的字段")
                        flag = false;
                        return false;
                    }
                })
                if (!flag) {
                    return flag;
                }
            }

            $.ajax({
                url: '${ctx}/excel/excel/analyzeExcel.do',
                type: 'post',
                data: {
                    blockNum: blockNum,
                    rowNums: rowNums,
                    colNums: colNums,
                    fields: fields
                },
                beforeSend: function () {
                    myLoadIndex = layer.msg('努力计算中,请耐心等待...', {
                        icon: 16,
                        shade: 0.1,
                        time: 0
                    });
                },
                success: function (res) {
                    layer.close(myLoadIndex);
                    if (res.success) {
                        $(".block-tr").text('表格第' + blockNum + '段');
                        var htmlArray = new Array();
                        $.each(res.data, function (key, value) {
                            htmlArray.push('<tr>');
                            htmlArray.push('<td>' + key + '</td>');
                            htmlArray.push('<td>' + value.totalNum + '</td>');
                            htmlArray.push('<td>' + value.successNum + '</td>');
                            htmlArray.push('</tr>');
                        });
                        if (htmlArray.length == 0) {
                            htmlArray.push('<tr>');
                            htmlArray.push('<td colspan="3">暂无数据</td>');
                            htmlArray.push('</tr>');
                        }
                        $("tbody").html(htmlArray.join(''));
                    } else {
                        util.layerMsgError(res.description);
                    }
                },
                error: function (res) {
                    util.layerMsgError("计算失败，请重新再试")
                }
            })
        });

        $("#btnReset").click(function () {
            $(":input").val('');
        });
    })
</script>
</body>
</html>